<template>
	<view>
		<u-skeleton :loading="isLoading" rows="5">
			<view class="">
				
		<view class="">
			
		
		<view class="">

			<view class="boxShadow" style="width: 97.5vw;margin-left: 1.25vw;">
				<view class="head" style="padding:0px 20rpx 2rpx 20rpx;border-bottom: 1px solid #eee;">
					<view class="y_cell" style="border-top: none;">

						<view class="y_cell_left">
							<view style="float: left;">
								<text class="u-cell-text">试卷</text>

								<view class="y_tag floatright mlw y_tag_bgPrimary">
									{{examInfo.name}}
								</view>

							</view>
						</view>

						<view class="y_cell_right">
							<view style="float: left;">
								<text class="u-cell-text " style="color: rgb(150, 151, 123);">模拟次数</text>

								<view class="y_tag floatright mlw y_tag_bgPrimary">
									{{examInfo.questionCount}}次
								</view>

							</view>

						</view>
					</view>

					<view class="y_cell">

						<view class="y_cell_left">
							<view style="float: left;">
								<text class="u-cell-text">平均</text>

								<view class="y_tag floatright mlw y_tag_bgPrimary">
									{{examInfo.avgScore}}分
								</view>

							</view>
						</view>

						<view class="y_cell_right">
							<view style="float: left;">
								<text class="u-cell-text" style="color: rgb(150, 151, 123);">正确率</text>

								<view class="y_tag floatright mlw y_tag_bgPrimary">
									{{examInfo.rightPercent}}%
								</view>

							</view>

						</view>
					</view>

					<view class="y_cell" style="border-bottom: none;">

						<view class="y_cell_left">
							<view style="float: left;">
								<text class="u-cell-text">最高</text>

								<view class="y_tag floatright mlw y_tag_bgPrimary">
									{{examInfo.maxScore}}分
								</view>

							</view>
						</view>

						<view class="y_cell_right">
							<view style="float: left;">
								<text class="u-cell-text" style="color: rgb(150, 151, 123);">最低</text>

								<view class="y_tag floatright mlw y_tag_bgPrimary">
									{{examInfo.minScore}}分
								</view>

							</view>

						</view>

					</view>

				</view>
				<!-- <u-divider></u-divider> -->

				<view class="big_button" style="margin-top: 20rpx;padding-bottom: 20rpx;">
					<u-modal :show="show" @confirm="startExam(examInfo.id)" ref="uModal" showCancelButton
						@cancel="()=>show=false">确认要开始模拟测试吗?</u-modal>
					<u-button text="模拟测试" type="success" @click="()=>show=true"></u-button>
				</view>
			</view>


			<view class="history" v-if="history.length!=0">
				<view class="y_yuantitle blue_title">
					模拟历史
				</view>



				<view class="options" v-for="(item,index) in history" :key="item.id" @click.stop="go_Mock(item)">
					<view class="o_top option">
						<view class="floatleft mlw"
							style="font-size: 30rpx;font-weight: bold;color: rgb(255, 105, 180);">
							{{item.beginTime}}
							<view class="y_tag  y_tag_red floatright" style="margin-left: 12rpx;">
								{{item.score}}分
							</view>
						</view>



						<view class="">
							<view class="floatright y_tag  y_tag_bgDanger mrw"
								v-if="item.endTime==null">未交卷</view>

							<view class="floatright y_tag  y_tag_bgPrimary mrw" v-else-if="item.endTime!=null ">已交卷
							</view>

							<view class="floatright y_tag  y_tag_bgPrimary mrw" v-else>未交卷</view>
						</view>


					</view>

					<view class="o_top option">
						<view class="floatleft  mlw">
							<view class="y_tag floatleft y_tag_Warning">
								正确率:{{item.questionCount}}%
							</view>

							<view class="y_tag floatleft mlw y_tag_Warning">
								答题时长:{{item.timer>=0?"未结束":item.timeCount+'秒'}}
							</view>

						</view>

					</view>




					<view class="o_top option examtime" style="margin-bottom: 16rpx;">
					   {{item.beginTime}}
					   
					   <view class="floatright y_tag  y_tag_bgSuccess mrshi" v-if="item.endTime!=null ">
						   查看详情
					   </view>
					   
					   <view class="floatright y_tag  y_tag_bgPrimary mrshi" v-if="item.endTime==null && item.timer>=0">
					   				继续考试
					   </view>
					   <view class="floatright y_tag  y_tag_bgWarning mrshi" v-if="item.endTime==null && item.timer<0">
					   				已过期
					   </view>
					</view>


				</view>





			</view>


		</view></view></view>
		</u-skeleton>
	</view>
</template>

<script>
	import {
		GetSingleMockTestPaper
	} from '../../../../api/brush_questions.js';
	export default {
		data() {
			return {
				id: "",
				examInfo: {
					avgScore: 0,
					id: "",
					labels: '',
					maxScore: 0,
					minScore: 0,
					name: '',
					passScore: 0,
					questionCount: 0,
					rightPercent: 0,
					sumScore: 0
				},
				history: [],
				show: false,
				isLoading:true
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.bindData();
		},
		methods: {
			go_Mock(item){
				if(item.endTime==null && item.timer<=0){
					uni.showToast({
						icon:"none",
						title:"已结束测试"
					})
					return
				}
				if(item.endTime!=null){
					uni.redirectTo({
						url:"/pages/brush_questions/mock_questions/result_Mock/result_Mock?id="+item.id
					})
					return
				}
				if(item.endTime==null && item.timer>=0){
					uni.redirectTo({
						url: "/pages/brush_questions/mock_questions/start_Mock/start_Exam/start_Exam?id=" + item.tpid
					})
				}
				
			},
			/**
			 * 跳转开始模拟考试
			 */
			startExam(id) {
				this.show = false;
				uni.navigateTo({
					url: "/pages/brush_questions/mock_questions/start_Mock/start_Exam/start_Exam?id=" + id
				})
			},
			/**
			 * 获取数据
			 */
			async bindData() {
				const res = await GetSingleMockTestPaper({
					page: 1,
					limit: 20,
					id: this.id
				});
				if (res.result != 0) {
					uni.showToast({
						title: "数据异常"
					})
				}
				this.examInfo = res.data.data;
				this.history = res.data.historys;
				this.isLoading=false;

			}
		}
	}
</script>

<style>
	.history {
		margin-top: 20rpx;
	}

	.y_cell_left {
		margin-left: 10rpx;
	}

	.y_cell_right {
		margin-right: 10rpx;
	}


	.examtime {
		font-size: 12px;
		color: rgb(128, 128, 128);
		margin-left: 10rpx;
	}

	.option {
		margin-top: 10rpx;
		display: flex;
		justify-content: space-between;
		width: 100%;
	}

	.options {
		margin-left: 1.2%;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		margin-top: 10rpx;
		// display: flex;
		// justify-content: space-between;
		width: 97%;
		border-radius: 10rpx;
		border: 1px solid rgba(25, 137, 250, 0.2);
	}

	.options:last-child {
		margin-bottom: 10rpx;
	}


	.y_tag {
		margin-top: 6rpx;
		padding: 4rpx;
		height: 24rpx;
		text-align: center;
		line-height: 24rpx;
		border: 1px solid rgb(25, 137, 250);
		color: rgb(25, 137, 250);
		border-radius: 6rpx;
		font-size: 10px;
	}

	.o_top {
		width: 100%;
	}
</style>